<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>血压测量</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <van-field type="text"
               readonly
               v-model="peopleInfo.name"
               label="姓名" input-align="right"  />
    <van-field type="text"
               readonly
               v-model="peopleInfo.sex == 1 ? '男' : '女'"
               label="性别" input-align="right"  />
    <van-field type="text"
               v-model="peopleInfo.age"
               readonly
               label="年龄" input-align="right"  >
      <template #right-icon>
        岁
      </template>
    </van-field>

    <van-field @click="isEdit ? datePicker =true : ''"
      style="margin-top: 8px" type="text"
               is-link
               readonly
               v-model="time"
               placeholder="请选择测量时间"
               label="测量时间" input-align="right"  />
    <van-field type="digit"
               v-model="systolic_pressure"
               placeholder="请输入收缩压"
               :readonly="!isEdit"
               @input="systolic_pressure = Number(systolic_pressure) > 200 || Number(systolic_pressure) <= 0  ? systolic_pressure.slice(0, -1) : systolic_pressure"
               label="收缩压（高压）" input-align="right"  >
      <template #right-icon>
        mmHg
      </template>
    </van-field>
    <van-field type="digit"
               v-model="diastolic_pressure"
               placeholder="请输入舒张压"
               :readonly="!isEdit"
               @input="inputHandler"
               label="舒张压（低压）" input-align="right"  >
      <template #right-icon>
        mmHg
      </template>
    </van-field>
    <van-field type="text"
               v-model="xueya_level"
               readonly
               label="血压情况" input-align="right"  />
    <van-field type="number"
               placeholder="请输入心率"
               v-model="Lcontent"
               :readonly="!isEdit"
               label="心率" @input="Lcontent = Number(Lcontent) > 200 || Number(Lcontent) <= 0 ? Lcontent.slice(0, -1) : Lcontent"  input-align="right"  >
      <template #right-icon>
        次/分钟
      </template>
    </van-field>
    <div class="bottom" v-show="isEdit">
      <button @click="clickDelete" v-show="xid && lid">删除</button>
      <button @click="keep" v-show="isEdit">保存</button>
    </div>
    <van-popup v-model="datePicker" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="datePicker = false"
        @confirm="dateOnConfirm"
      />
    </van-popup>
    <van-dialog v-model="keepShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认保存吗？"
                @confirm="keepConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="deleteShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认删除吗？"
                @confirm="deleteConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddXueYa',
  data () {
    return {
      Lcontent: '', // 心率
      classification: 1, // 1 手工 2机器
      time: '',
      content: '',
      systolic_pressure: null, // 收缩压
      diastolic_pressure: null, // 舒张压
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      datePicker: false,
      userid: this.$route.query.userid,
      xid: this.$route.query.xid,
      lid: this.$route.query.lid,
      peopleInfo: [],
      keepShow: false,
      isEdit: 1,
      deleteShow: false
    }
  },
  computed: {
    xueya_level () {
      if (this.systolic_pressure && this.diastolic_pressure) {
        let condition = ''
        if (this.systolic_pressure < 120) {
          condition = '正常血压'
          if (this.diastolic_pressure < 80) {
            condition = '正常血压'
          } else if (this.diastolic_pressure <= 89 && this.diastolic_pressure >= 80) {
            condition = '正常高值'
          } else if (this.diastolic_pressure >= 90 && this.diastolic_pressure <= 99) {
            condition = '一级高血压'
          } else if (this.diastolic_pressure >= 100 && this.diastolic_pressure <= 109) {
            condition = '二级高血压'
          } else if (this.diastolic_pressure >= 110) {
            condition = '三级高血压'
          }
        } else if (this.systolic_pressure >= 120 && this.systolic_pressure <= 139) {
          condition = '正常高值'
          if (this.diastolic_pressure >= 90 && this.diastolic_pressure <= 99) {
            condition = '一级高血压'
          } else if (this.diastolic_pressure >= 100 && this.diastolic_pressure <= 109) {
            condition = '二级高血压'
          } else if (this.diastolic_pressure >= 110) {
            condition = '三级高血压'
          }
        } else if (this.systolic_pressure >= 140 && this.systolic_pressure <= 159) {
          condition = '一级高血压'
          if (this.diastolic_pressure >= 100 && this.diastolic_pressure <= 109) {
            condition = '二级高血压'
          } else if (this.diastolic_pressure >= 110) {
            condition = '三级高血压'
          }
        } else if (this.systolic_pressure >= 160 && this.systolic_pressure <= 179) {
          // 二级高血压
          condition = '二级高血压'
          if (this.diastolic_pressure >= 110) {
            condition = '三级高血压'
          }
        } else if (this.systolic_pressure >= 180) {
          // 三级高血压
          condition = '三级高血压'
        }
        return condition
      } else {
        return '-'
      }
    }
  },
  mounted () {
    this.getPeople()
    if (this.xid && this.lid) {
      this.getHisData()
    }
  },
  methods: {
    deleteConfirm () {
      this.$http.updateHealthdataById({xid: this.xid, lid: this.lid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('删除成功')
            this.back()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 删除
    clickDelete () {
      this.deleteShow = true
    },
    // 舒张压输入
    inputHandler (value) {
      value = Number(value) > 200 || Number(value) <= 0 ? value.slice(0, -1) : value
      this.diastolic_pressure = value
    },
    getHisData () {
      this.$http.findHealthdataOneNew({xid: this.xid, lid: this.lid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let dh = res.data.data
            this.time = dh.time
            this.Lcontent = dh.lContent
            this.systolic_pressure = dh.content.split('/')[1]
            this.diastolic_pressure = dh.content.split('/')[0]
            this.isEdit = dh.panduan
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 保存确认
    keepConfirm () {
      if (this.lid && this.xid) {
        this.$http.updateHealthdata({
          xid: this.xid,
          lid: this.lid,
          time: this.time,
          userid: this.userid,
          content: this.diastolic_pressure + '/' + this.systolic_pressure,
          lContent: this.Lcontent,
          typeid: 3,
          classification: this.classification
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.$toast('修改成功')
              this.back()
            } else {
              this.$toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            this.$toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$http.saveXueXin({
          userid: this.userid,
          Lcontent: this.Lcontent,
          classification: this.classification,
          time: this.time,
          content: this.diastolic_pressure + '/' + this.systolic_pressure
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.$toast('保存成功')
              this.back()
            } else {
              this.$toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            this.$toast('您的网络有些拥挤，请稍后再试')
          })
      }
    },
    keep () {
      if (!this.time) {
        this.$toast('请选择测量时间')
        return false
      } else if (!this.systolic_pressure) {
        this.$toast('请输入舒展压')
        return false
      } else if (!this.diastolic_pressure) {
        this.$toast('请输入收缩压')
        return false
      } else if (!this.Lcontent) {
        this.$toast('请输入心率')
        return false
      }
      this.keepShow = true
    },
    getPeople () {
      this.$http.findUserXinXiTuoMin({data_user_id: this.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleInfo = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 测量时间
    dateOnConfirm () {
      this.time = this.Common.formatDate(this.currentDate)
      this.datePicker = false
    },
    // 选择日期添加年月日
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return val + '日'
      } else if (type === 'hour') {
        return val + '点'
      } else if (type === 'minute') {
        return val + '分'
      }
      return val
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  /*height: 100%;*/
  height: calc(100vh - 50px);
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
/deep/ .van-field__label{
  width: 7.2em;
}
/deep/ .van-cell{
  font-size: 15px;
}
.bottom{
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
}
.bottom button{
  width: 92%;
  height: 44px;
  background: linear-gradient(
    90deg
    , #1DA3F2 0%, #1DC7F2 100%);
  color: #FFFFFF;
  border-radius: 22px;
  border: none;
  margin: 0 10px;
}
</style>
